<template>

  <div>

    <el-card>

      <el-row>
        <el-col :span="6">
          <!--返回导航-->
          <el-page-header @back="goBack" content="动态数据明细" />
        </el-col>

        <el-col :span="18">
          <el-button type="warning" size="mini" @click="openSaveDynamicDataDetailed">新增</el-button>
        </el-col>
      </el-row>
    </el-card>


    <el-card style="margin-top: 10px">

      <el-row>
        <el-col :span="12">
          <!--图表-->
          <div class="echarts-title">动态数据明细</div>
          <div id="echartsDynamicDataDetailed" class="echarts-content"></div>

        </el-col>

        <el-col :span="12">

          <!--列表-->
          <el-table
            :data="pageConfig.data"
            max-height="630px"
            height="630px"
            style="width: 100%">

            <el-table-column
              prop="entryTime"
              label="数据时间"
            >
            </el-table-column>

            <el-table-column
              prop="value"
              label="数值"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button @click="openUpdDynamicDataDetailedBefore(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                <el-button @click="delDynamicDataDetailedByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!--分页部分-->
          <el-pagination
            style="width:33%; margin-right:10px; margin-top:10px;"
            background
            layout="total, prev, pager, next, jumper"
            @current-change="dynamicDataDetailedCurrentChange"
            :page-size="pageConfig.size"
            :current-page="pageConfig.current"
            :pager-count="5"
            :total="pageConfig.total">
          </el-pagination>

        </el-col>
      </el-row>

    </el-card>

    <DynamicDataDetailedSaveUpd ref="DynamicDataDetailedSaveUpdRef" @getDynamicDataDetailedListPage="getDynamicDataDetailedListPage"/>

  </div>

</template>

<script>

  // 局部引入
  import * as echarts from 'echarts'
  import http from '@/utils/http'
  import DynamicDataDetailedSaveUpd from './DynamicDataDetailedSaveUpd'

  export default {
    // 动态表单明细
    name: "DynamicDataDetailedList",
    components: {
      DynamicDataDetailedSaveUpd,
    },
    data(){
      return {
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
          // 表格中的数据
          data: [],
        },
        // 动态主表ID
        dynamicId: null,
        // echarts 数据
        echartsData: {
          // x轴
          xData: [],
          // y轴
          yData: [],
        },
      }
    },
    methods: {
      /**
       * 初始化 图表数据,实现数据的展示
       */
      initEchartsDynamicDataDetailed(){
        let myChart = echarts.init(document.getElementById('echartsDynamicDataDetailed'));
        let option = {
          xAxis: {
            type: 'category',
            data: this.echartsData.xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.echartsData.yData,
              type: 'line',
              // 加上这个变成平滑的曲线
              // smooth: true
            }
          ]
        };

        myChart.setOption(option)
      },
      /**
       * 获取折线图的需要的数据
       */
      getLineChartData(){
        http.post("/dynamic/getLineChartData", {
          dynamicId: this.dynamicId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            let xData = []
            let yData = []
            for (let obj of res.data){
              xData.push(obj.entryTime)
              yData.push(obj.value)
            }
            this.echartsData.xData = xData
            this.echartsData.yData = yData
            console.log(yData)
            console.log(xData)
          }
          this.initEchartsDynamicDataDetailed()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开新增数据明显弹窗
       */
      openSaveDynamicDataDetailed(){
        this.$refs.DynamicDataDetailedSaveUpdRef.openDynamicDataDetailedSaveUpdPage('save', null, this.dynamicId)
      },
      /**
       * 打开修改弹出窗口之前
       * @param row 这一行数据
       */
      openUpdDynamicDataDetailedBefore(row){
        this.$refs.DynamicDataDetailedSaveUpdRef.openDynamicDataDetailedSaveUpdPage('upd', row, this.dynamicId)
      },
      /**
       * 删除提示
       */
      delDynamicDataDetailedByIdTips(row){
        this.$confirm('删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delDynamicDataDetailedById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除动态明细
       * @param row 当前行数据
       */
      delDynamicDataDetailedById(row){
        http.post("/dynamic/delDynamicDataDetailedById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getDynamicDataDetailedListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      dynamicDataDetailedCurrentChange(value){
        this.pageConfig.current = value
        this.getDynamicDataDetailedListPage()
      },
      /**
       * 分页查询动态数据表
       */
      getDynamicDataDetailedListPage(){
        http.post("/dynamic/getDynamicDataDetailedListPage", {
          current: this.pageConfig.current,
          size: this.pageConfig.size,
          dynamicId: this.dynamicId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.pageConfig.data = data.records

          this.getLineChartData()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 返回上级
       */
      goBack(){
        this.$router.push('/toDynamicRecordingList')
      },
    },
    mounted(){
      // 从路由中获取参数
      this.dynamicId = this.$route.query.dynamicId
      this.getDynamicDataDetailedListPage()
    },
  }
</script>

<style scoped>

  .echarts-title {
    font-size: 16px;
    text-align: center;
    font-weight:900
  }

  .echarts-content{
    width: 600px;
    height: 550px;
  }

</style>
